<!--
 * @Author: your name
 * @Date: 2021-09-17 22:37:03
 * @LastEditTime: 2021-09-28 16:01:45
 * @LastEditors: Please set LastEditors
 * @Description: 下拉菜单
 * @FilePath: \uniapp-cil\src\components\x-dropdown\x-dropdown.vue
-->
 <template>
  <view class="u-rela">
    <view
      class="dropdown__menu u-flex bg_w"
      :class="[`b_b_s_${borderBottom}`]"
      :style="{ height: $u.addUnit(menuHeight) }"
    >
      <view
        v-for="(item, index) in menuList"
        :key="index"
        class="dropdown__menu_item"
        :class="[`w_${parseInt(100 / menuList.length)}`]"
        @tap.stop="menuClick(index)"
      >
        <view class="u-flex u-row-center">
          <text
            :style="{
              color: item.disabled
                ? '#c0c4cc'
                : index === current || highlightIndex == index
                ? activeColor
                : inactiveColor,
              fontSize: $u.addUnit(titleSize),
            }"
            >{{ item.title }}</text
          >
          <view
            class="u-m-l-5 arrow"
            :class="{
              arrow_rotate: index === current && !item.icon,
            }"
          >
            <u-icon
              :custom-style="{ display: 'flex' }"
              :name="item.icon ? item.icon : menuIcon"
              :size="$u.addUnit(menuIconSize)"
              :color="
                index === current || highlightIndex == index
                  ? activeColor
                  : '#c0c4cc'
              "
            ></u-icon>
          </view>
        </view>
      </view>

      <view
        class="dropdown_content u-abso w_100 o_hidden"
        :style="[
          {
            transition: `height ${duration / 1000}s linear`,
            top: $u.addUnit(menuHeight),
            height: active ? contentHeight + 'px' : 0 + 'px',
          },
        ]"
        @tap="maskClick"
        @touchmove.stop.prevent
      >
        <view @tap.stop.prevent class="menu_list u-abso w_100">
          <slot></slot>
        </view>
      </view>
    </view>
  </view>
</template>
 
 <script>
export default {
  name: "x-dropdown",
  props: {
    // 菜单标题和选项的激活态颜色
    activeColor: {
      type: String,
      default: "#2979ff",
    },
    // 菜单标题和选项的未激活态颜色
    inactiveColor: {
      type: String,
      default: "#606266",
    },
    // 菜单栏的高度
    menuHeight: {
      type: [String, Number],
      default: 80,
    },
    // 标题的字体大小
    titleSize: {
      type: [Number, String],
      default: 28,
    },
    //菜单栏底部边框粗细
    borderBottom: {
      type: [String, Number],
      default: 0,
    },
    // 菜单右侧的icon图标
    menuIcon: {
      type: String,
      default: "arrow-down",
    },
    // 菜单右侧图标的大小
    menuIconSize: {
      type: [Number, String],
      default: 26,
    },
    // 点击当前激活项标题是否关闭菜单
    closeOnClickSelf: {
      type: Boolean,
      default: true,
    },
    // 点击遮罩是否关闭菜单
    closeOnClickMask: {
      type: Boolean,
      default: true,
    },
    // 过渡时间
    duration: {
      type: [Number, String],
      default: 300,
    },
    menuList:{
      type:Array,
      required:true,
    }
  },
  data() {
    return {
      active: false, // 下拉菜单的状态
      contentHeight: 0,
      // 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
      // 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
      current: 9999,
      // 菜单高亮
      highlightIndex: 999,

    };
  },
  created() {
    // 引用所有子组件(x-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
    this.children = [];
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    init() {
      // 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
      // 以保证数据的正确性
      // this.menuList = [];
      this.children.map((child) => {
        child.init();
      });
    },
    menuClick(index) {
      // 判断是否被禁用
      if (this.menuList[index].disabled) return;
      // 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
      if (index === this.current && this.closeOnClickSelf) {
        this.close();
        // 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
        setTimeout(() => {
          this.children[index].active = false;
        }, this.duration);
        return;
      }
      // 展开下拉菜单
      this.open(index);
    },
    // 打开下拉菜单
    open(index) {
      // 重置高亮索引，否则会造成多个菜单同时高亮
      // this.highlightIndex = 9999;

      // 标记展开状态以及当前展开项的索引
      this.active = true;
      this.current = index;
      // 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
      // 之所以不是因display: none，是因为nvue没有display这个属性
      this.children.map((val, idx) => {
        val.active = index == idx ? true : false;
      });
      this.$emit("open", this.current);
    },
    // 设置下拉菜单处于收起状态
    close() {
      this.$emit("close", this.current);
      // 设置为收起状态，同时current归位，设置为空字符串
      this.active = false;
      this.current = 99999;
    },
    // 外部手动设置某个菜单高亮
    highlight(index = undefined) {
      this.highlightIndex = index !== undefined ? index : 99999;
    },
    // 点击遮罩层
    maskClick() {
      // 如果不允许点击遮罩，直接返回
      if (!this.closeOnClickMask) return;
      this.close();
    },
    getHeight() {
      let windowHeight = this.$u.sys().windowHeight;
      this.$u.getRect(".dropdown_content").then((res) => {
        this.contentHeight = windowHeight - res.bottom;
      });
    },
  },
};
</script>
 
<style lang="scss" scoped>
.dropdown__menu {
  .dropdown__menu_item {
    .arrow {
      transition: all 0.3s linear;
    }
    .arrow_rotate {
      transform: rotate(-180deg);
    }
  }
  .dropdown_content {
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10086;
    .menu_list {
    }
  }
}
</style>